<template>
  <div id="reserTime">
    <div class="table">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>BeijiRonin</span>
          <el-button
            style="float: right; margin-right: 10%"
            type="text"
            @click="load()">刷新</el-button>
        </div>
        <el-table
          :data="datas"
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column prop="id" label="索引"> </el-table-column>
          <el-table-column prop="libraryId" label="图书馆区ID"></el-table-column>
          <el-table-column prop="maxPeople" label="馆区最大容纳人数"> </el-table-column>
          <el-table-column prop="nowPeople" label="馆区当前人数"></el-table-column>
          <el-table-column prop="openTime" label="开放时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="danger" round size="small" @click="delete_opera(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-card class="box-card" shadow="hover" style="margin-top: 50px">
      <div slot="header" class="clearfix">
        <span>发布</span>
      </div>
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item label="图书馆区ID" prop="libraryId">
            <el-input v-model="ruleForm.libraryId"></el-input>
          </el-form-item>
          <el-form-item label="馆区最大容纳人数" prop="maxPeople">
            <el-input v-model="ruleForm.maxPeople"></el-input>
          </el-form-item>
          <el-form-item label="开放时间" prop="openTime">
            <el-input v-model="ruleForm.openTime"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">
              <i class="el-icon-upload"></i>
              发布</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "reserTime",
  data() {
    return {
      datas: [],
      dialogImageUrl: "",
      loading: true,
      dialogVisible: false,
      ruleForm: {
        libraryId: "",
        maxPeople: "",
        openTime: "",
      },
      rules: {
        libraryId: [
          { required: true, message: "请输入图书馆区名", trigger: "change" },
        ],
        maxPeople: [
          { required: true, message: "请输入馆区最大容纳人数", trigger: "change" },
        ],
        openTime: [
          { required: true, message: "请输入开放时间", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post(`http://localhost:4578/reser_json/save`, {
              reserItem: JSON.stringify(this.ruleForm),
            })
            .then(() => {
              this.$refs["ruleForm"].resetFields();
              this.load();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    load() {
      this.loading = true;
      this.datas = [];
      this.axios
        .post(`http://localhost:4578/all_json/reserList`, {})
        .then((ret) => {
          this.datas = ret.data;
          this.loading = false;
        });
    },
    delete_opera(item) {
      this.axios
        .post(`http://localhost:4578/reser_json/delete`, {
          reserItem: JSON.stringify(item),
        })
        .then(() => {
          this.load();
        });
    },

  },
  mounted() {
    this.load();
  },
};
</script>